<template>
	<div class="radio-more-wraper">
		<div class="nav-head"><router-link to="/radSor"><img src="../../../../assets/icon-return45.png"></router-link><div class="title">更多</div></div>
		<div class="top-blank"></div>
		<div class="more-wraper">
			<div class="more-swiper">
				<swiper :options="swiperOption" ref="mySwiper">
				    <!-- slides -->
				    <swiper-slide><img src="../../../../assets/more-swiper-pic1.png"></swiper-slide>
				    <swiper-slide><img src="../../../../assets/more-swiper-pic1.png"></swiper-slide>
				    <swiper-slide><img src="../../../../assets/more-swiper-pic1.png"></swiper-slide>
				    <swiper-slide><img src="../../../../assets/more-swiper-pic1.png"></swiper-slide>
				    <!-- Optional controls -->
				    <div class="swiper-pagination"  slot="pagination"></div>
				</swiper>
			</div>
			<div class="more-list">
				<div>
					<img src="../../../../assets/more-list-pic1.png">
					<p>说唱电台</p>
				</div>
				<div class="mlr15">
					<img src="../../../../assets/more-list-pic1.png">
					<p>教育电台</p>
				</div>
				<div>
					<img src="../../../../assets/more-list-pic1.png">
					<p>良性电台</p>
				</div>
				<div>
					<img src="../../../../assets/more-list-pic1.png">
					<p>宫廷剧</p>
				</div>
				<div class="mlr15">
					<img src="../../../../assets/more-list-pic1.png">
					<p>二胡电台</p>
				</div>
				<div>
					<img src="../../../../assets/more-list-pic1.png">
					<p>古筝电台</p>
				</div>
				<div>
					<img src="../../../../assets/more-list-pic1.png">
					<p>宫廷剧</p>
				</div>
				<div class="mlr15">
					<img src="../../../../assets/more-list-pic1.png">
					<p>二胡电台</p>
				</div>
				<div>
					<img src="../../../../assets/more-list-pic1.png">
					<p>古筝电台</p>
				</div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
import musicPlayer from '../../../../components/music_player'
	export default {
		name:"radioMore",
		data(){
			return{
				swiperOption:{
					pagination:{
						el:".swiper-pagination"
					},
					autoplay:true
				}
			}
		},
		computed: {
	      	swiper() {
	        	return this.$refs.mySwiper.swiper
	      	}
	    },
	    mounted() {
	      // current swiper instance
	      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
	      	// console.log('this is current swiper instance object', this.swiper)
	      	this.swiper.pagination.bullets.css('background','rgba(255,255,255,0.2)');
	    },
	    components:{
	    	musicPlayer
	    }
	}
</script>
<style scoped lang="less">
.blank{
	width: 100%;
	height: 108 / 100rem;
}
.top-blank{
	width: 100%;
	height: 88 / 100rem;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}
.more-wraper{
	// margin-top: 88 / 100rem;
	// margin-bottom: 108 / 100rem;
	.more-swiper{
		width: 100%;
		height: 350 / 100rem;
		.swiper-container{
			width: 100%;
			height: 100%;
		}
	}
	.more-list{
		width: 100%;
		padding-top: 35 / 100rem;
		overflow: hidden;
		div{
			float: left;
			width: 240 / 100rem;
			margin-bottom: 24 / 100rem;
			img{
				width: 100%;
				height: 100%;
			}
			p{
				padding-left: 10 / 100rem;
				font-size: 24 / 100rem;
				padding-top: 12 / 100rem;
			}
		}
		.mlr15{
			margin-left: 15 / 100rem;
			margin-right: 15 / 100rem
		}
	}
}	
.more-swiper img{
	width: 100%;
	height: 350 / 100rem;
} 
</style>